<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery-UI</title>
		<!-- 导入jQUery本体 -->
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
		<!-- 导入jQuery UI的拓展库 -->
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jqueryui/1.12.1/jquery-ui.min.js"></script>
		<!-- 导入jQuery UI的css -->
		<link rel="stylesheet"
			href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jqueryui/1.12.1/jquery-ui.min.css" />
		<style>
			#draggable {
				width: 200px;
				height: 200px;
				background-color: red;
				position: absolute;
				text-align: center;
				color: white;
			}
		</style>
		<script>
			$(function() {
				//拖拽
				$("#draggable").draggable();

				//日期控件
				$("#datepicker").datepicker();

				//进度条
				$("#progressbar").progressbar({
					value: 50
				});
			});
		</script>
	</head>
	<body>
		<div id="draggable">
			<p>请拖动我！</p>
		</div>

		<div>
			<p>日期：<input type="text" id="datepicker"></p>
		</div>

		<div id="progressbar"></div>
	</body>
</html>
